@media (max-width: 991px) {
    #nav{
        background: var(--white-color);
        padding: 0;
    }
    #nav .container{
        box-shadow: none;
        border-radius: 0;
    }
    #navbarSupportedContent {
        background: #fff;
        /* max-height: 500px; */
        left: 0;
        padding: 20px;
        position: absolute;
        z-index: 99;
        top: 100%;
        width: 100%;
        /* overflow: auto; */
        box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }
    #nav-item{
        border-bottom: 1px solid var(--border-color);
        padding: 0.75rem 0.5rem;
    }
    #nav-item i.bi-chevron-down{
        margin-right: auto;
    }
    #navbarSupportedContent  .nav-item:last-child{
        margin-bottom: 20px;
    }
    .breatcome h1{
        font-size: 30px;
    }
    #home{
        min-height: 80vh;
    } 
}
@media (max-width: 768px) {
    
}
@media (max-width: 767px) {
    #home{
        min-height: 50vh;
    }
    .comment-area li{
        justify-content: center;
    }
    .comment-area li .blog-thumb{
        margin: auto;
    }
    .comment-area li .blog-thumb-info{
        padding: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .comment-area li .blog-content{
        width: 100%;
        padding: 0;
        text-align: center;
    }
}
@media (max-width: 700px) {
    #loggiin .info-text.login{
        display: none;
    }
    #loggiin .form-box.login{
        width: 100%;
    }
    #loggiin .info-text.register{
        display: none;
    }
    #loggiin .form-box.register{
        width: 100%;
    }
    .breatcome{
        min-height: 300px;
        padding: 2rem 0;
    }
}
@media (max-width: 550px) {
    #home{
        padding-bottom: 40px;
        min-height: 50vh;
    }
    #home .play-btn{
        width: 60px;
        height: 60px;
    }
    #home .play-btn::before{
        width: 80px;
        height: 80px;
    }
    .cloud-svg{
        display: none;
    }
    .title-section , .pricing .title-section{
        font-size: 25px !important;
        margin-bottom: 1rem;
    }
    .discreption , .event-information-wrap .list-wrap>li{
        font-size: 14px;
    }
    .widget-search {
        padding: 15px;
    }
    .blog-details .needs-validation{
        padding: 0.7rem;
    }
    .event-details-list .list-wrap li{
        width: 100%;
    }
    .event-widget{
        padding: 25px 15px;
    }
}